<template>
	<view>
		<view class="index_head">
			<text>请填写报修信息！</text>
		</view>
		<!-- 信息切换区域 -->
		<view>
			<view hover-class="infoList" v-if="userInfo!=''" class="info-box" @click="goDataPage">
				<view class="company_address">
					<text class="company">公司</text>
					{{userInfo.address}}
				</view>
				<view class="company_name">
					<view class="nameTip">
						{{userInfo.company}}
					</view>
					<text class="iconfont icon-xiangyou rightTip">
					</text>
					<view class="person_info">
						{{userInfo.linkman}} {{userInfoPhone}}
					</view>
				</view>
			</view>
			<view hover-class="infoList" v-else class="none-box" @click="goDataPage">
				<view class="noneFlaot">您还没有填写信息，请先填写信息！</view>
				<view class="iconfont icon-xiangyou noneRight"></view>
			</view>
		</view>
		<!-- 复选框 -->
		<view class="checkBox">
			请选择您要报修的业务：
			<u-checkbox-group wrap @change="checkboxGroupChange">
				<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index"
					:name="item.name">{{item.name}}</u-checkbox>
			</u-checkbox-group>
		</view>
		<!-- 备注区域 -->
		<view class="textkBox">
			<textarea @input="inputDetail" maxlength="-1" :value="detail" placeholder="请输入备注,按需填写(非必填)" />
		</view>
		<!-- 上传图片区域 -->
		<!-- 添加图片区域 -->
		<view class="cateList">
			添加图片(非必选)：
		</view>
		<view class="imgContainer">
			<view class="imgButton" @click="chooseImg">
				<text class="iconfont icon-paizhaoshangchuan"></text>
			</view>
			<view class='imageInfo' v-for="(value,index) in imgItem" :key="index">
				<image :src="value" :data-index="index" mode="aspectFill" @click="imgPreview(index,imgItem)">
					<!-- <icon type='cancel' ></icon> -->
					<u-icon name="close-circle" class="delete-btn" @click="deletePic(index)" :data-pic_index='index'>
					</u-icon>
				</image>
			</view>
		</view>
		<view class="submitBtn">
			<u-button @click="subscribeMessage">提交</u-button>
			<!-- <u-button  type="warning" @click="goTestPage">提交</u-button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfoAddress:'',
				userInfoCompany:'',
				userInfoLinkman:'',
				userInfoPhone:'',
				openId: '',
				userInfo: [],
				nextContactId: 0,
				imgItem: [],
				detail: '',
				checkBox: [],
				processNotice:'',
				completeNotice:'',
				exchangeNotice:'',
				phoneFlag:false,
				list: [{
						name: '打印机维修业务',
						checked: false,
						disabled: false
					},
					{
						name: '打印机加粉业务',
						checked: false,
						disabled: false
					},
					{
						name: '电脑维修业务',
						checked: false,
						disabled: false
					},
					{
						name: '监控维修业务',
						checked: false,
						disabled: false
					},
					{
						name: '网络故障业务',
						checked: false,
						disabled: false
					},
					{
						name: '其它业务',
						checked: false,
						disabled: false
					}
				]
			}
		},
		onLoad() {
			this.getLoginData();
		},
		onShow() {
			let that = this;
			this.userInfo = uni.getStorageSync('dataInfo');
			console.log('输出的数据：');
			console.log(this.userInfo);
			that.nextContactId = that.userInfo.contactId;
			if(this.phoneFlag){
				this.userInfoPhone=this.userInfo.phone;
			}
			console.log(this.nextContactId);
			this.phoneFlag=true;
		},
		methods: {
			//清除提交过的数据
			cleanData() {
				this.imgItem = '',
					this.detail = '',
					this.checkBox = '',
					//复选框
					this.list.forEach(function(value, index) {
						// console.log(index);
						value.checked = false;
					})
			},
			//前往数据列表
			goDataPage() {
				console.log('发送给的数据：'+this.nextContactId);
				uni.navigateTo({
					url: "../dataPage/dataPage?nextContactId=" + this.nextContactId
				})
			},
			goTestPage() {
				uni.navigateTo({
					url: "../test/test"
				})
			},
			//uni-app 方法调用
			showTips: function(e) {
				let options = {
					msg: '一般消息提示~',
					duration: 2000
				};
				this.$refs.toast.showTips(options);
			},
			//登录获取后台数据openId和用户信息
			getLoginData() {
				let code = '';
				let that = this;
				uni.login({
					provider: 'weixin',
					//小程序appid secret
					success: function(res) {
						console.log(res);
						code = res.code;
						uni.request({
							url: "https://zioncloud.top/repair/user/getOpenId",
							data: {
								jsCode: code,
							},
							method: "POST",
							header: {
								'content-type': 'application/json'
							},
							success(res) {
								console.log('登录成功!');
								console.log(res);
								let openId = res.data.data.openId;
								that.openId = openId;
								uni.setStorageSync('openId', openId);
								//获取用户信息
								uni.request({
									url: 'https://zioncloud.top/repair/user/getUserProfile',
									headers: {
										'Content-Type': 'application/json'
									},
									method: 'POST',
									data: {
										openId: that.openId,
									},
									success(res) {
										//保存当前用户的所有信息
										uni.setStorageSync('dataInfo', res.data.data.userProfile);
										// console.log('下面是获取到的用户信息：');
										that.userInfo = uni.getStorageSync('dataInfo');
										// console.log(res);
										that.nextContactId = that.userInfo.lastContactId;
										that.userInfoPhone=that.userInfo.phoneNumber;
									},
									fail(err) {
										console.log(err);
									}
								})
							}
						})
					}
				});
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				// console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e);
				this.checkBox = e;
			},
			//文本域数据信息
			inputDetail(e) {
				this.detail = e.detail.value;
				console.log(this.detail);
			},
			//选中
			selectId1(e) {
				console.log('点击了！');
				this.currentId = e.currentTarget.dataset.current;
				console.log(this.currentId);
			},
			//选择图片
			chooseImg() {
				let that = this;
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function(res) {
						that.imgItem = res.tempFilePaths;
						console.log(that.imgItem);
					}
				});
			},
			//预览图片
			imgPreview(index, imgItem) {
				uni.previewImage({
					current: index,
					urls: imgItem
				})
			},
			//删除图片
			deletePic(index) {
				var pic_index = index;
				var upload_pic = [];
				console.log('删除')
				for (let i in this.imgItem) {
					// 将没有被删除的图片放入新数组
					if (i != pic_index) {
						upload_pic.push(this.imgItem[i]);
					}
				}
				this.imgItem = upload_pic;
				console.log(this.imgItem);
			},
			//上传图片
			async upLoadImg(i) {
				let that = this;
				let {
					data: res
				} = await uni.uploadFile({
					url: 'https://zioncloud.top/repair/feedback/fileUpload', //仅为示例，非真实的接口地址
					filePath: that.imgItem[i],
					name: 'file',
					formData: {
						openId: that.openId,
						path: that.imgItem[i],
						feedbackId: that.feedbackId,
					},
					success: (uploadFileRes) => {
						console.log('上传图片成功？');
						console.log(uploadFileRes.data);
					}
				});
				console.log(res);
			},
			//提交数据
			submitData() {
				let that = this;
				uni.showModal({
					title: '提交表单',
					content: '确定提交吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.request({
								url: 'https://zioncloud.top/repair/order/create',
								method: "POST",
								header: {
									"Content-Type": "application/x-www-form-urlencoded"
								},
								data: {
									openId: that.openId,
									detail: that.detail,
									imgList: that.imgItem,
									type: that.checkBox,
									processNotice: that.processNotice,
									completeNotice: that.completeNotice,
									exchangeNotice: that.exchangeNotice,
									unit: that.userInfo.company,
									address: that.userInfo.address,
									department: that.userInfo.department,
									number: that.userInfo.phone,
									name: that.userInfo.linkman
								},
								success(res) {
									console.log(res);
									let orderId = res.data.data.orderId;
									//上传图片
									if (res.data.statusCode == 200) {
										let num = 0;
										that.imgItem.forEach(async function(value, index) {
											await uni.uploadFile({
												url: 'https://zioncloud.top/repair/order/fileUpload',
												filePath: value,
												name: 'img',
												header: {},
												formData: {
													orderId: orderId,
													openId: that.openId,
													path: value
												},
												success(res) {
													console.log(res);
													console.log('前方数据');
													num = num + 1;
													if (num == that.imgItem.length) {
														uni.showToast({
															title: '成功提交！',
															icon: 'success',
															duration: 1000
														})
														//清空数据
														that.cleanData();
													}
												}
											});
											
										});
									}
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//进行消息的订阅
			subscribeMessage() {
				let that = this;
				let time = 1;
				//新用户是否先填写了信息
				if(that.userInfo==''){
					uni.showToast({
						title: '请先填写服务信息！',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				//判断是否勾选了报修服务
				if (that.checkBox == '') {
					uni.showToast({
						title: '请先勾选服务！',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				uni.requestSubscribeMessage({
					tmplIds: ["-95_v13pbu4T-i0yR9IuUVygv3tKMgyTbeb1gxItZrI",
						"mBDHV3HpQSs2qByrkPADB1I3v7vluQcOICFtAIXmmq0",
						"m2mOcHwz4IAP0PJdSAxGwtLpmLL1CciVigp55888e7U"
					],
					success: function(res) {
						//res.XII_0By8D9WabnUjVPB_8S1itsm2d4_xxxxx === 'accept'
						time = time + 1;
						if (res['-95_v13pbu4T-i0yR9IuUVygv3tKMgyTbeb1gxItZrI'] === 'accept') {
							that.processNotice = 1;
							console.log('订单接收提醒');
						}
						if (res.mBDHV3HpQSs2qByrkPADB1I3v7vluQcOICFtAIXmmq0 === 'accept') {
							that.completeNotice = 1;
							console.log('订单换人提醒');
						}
						if (res.m2mOcHwz4IAP0PJdSAxGwtLpmLL1CciVigp55888e7U === 'accept') {
							that.exchangeNotice = 1;
							console.log('订单完成提醒');
						}
					}
				});
				// 提交表单
				that.submitData();
			},
			/*
			 * uniapp微信小程序分享页面到微信好友
			*/
			onShareAppMessage() {
			    return {
			      title: `创科捷报障小程序`,
			      // imageUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
			      success: function (res) {
			        console.log("success22:" + JSON.stringify(res));
			      },
			      fail: function (err) {
			        console.log("fail22:" + JSON.stringify(err));
			      },
			    };
			},
			 
			/*
			 * uniapp微信小程序分享页面到微信朋友圈
			*/
			onShareTimeline() {
			    return {
			      title: `分享朋友：创科捷报障小程序`,
			      imageUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
			      success: function (res) {
			        console.log("success22:" + JSON.stringify(res));
			      },
			      fail: function (err) {
			        console.log("fail22:" + JSON.stringify(err));
			      },
			    };
			},
		}
	}
</script>

<style>
	.index_head {
		height: 65rpx;
		/* margin:20rpx; */
		padding: 10rpx;
		/* background-color: #ddd; */
		border-radius: 20rpx;
		font-weight: bold;
		text-align: center;
	}

	/* 公司信息选择 */
	.info-box {
		margin-left: 50rpx;
	}

	.company {
		background-color: rgb(86, 84, 228);
		color: #fff;
		padding: 5rpx;
	}

	.company_address {
		margin-top: 12rpx;
		font-size: 22rpx;
	}

	.company_name {
		position: relative;
		margin-top: 12rpx;
		font-size: 30rpx;
		height: 100rpx;
		/* line-height: 90rpx; */
	}

	.rightTip {
		/* float: right; */
		position: absolute;
		right: 0;
		top: 10%;
		width: 5%;
		margin-right: 60rpx;
	}

	.nameTip {
		/* float: left; */
		position: absolute;
		left: 5rpx;
		top: 0;
		width: 85%;
	}

	.person_info {
		/* margin-top: 12rpx; */
		font-size: 26rpx;
		position: absolute;
		bottom: 5%;
	}

	.none-box {
		height: 100rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
		line-height: 100rpx;
	}

	.noneFlaot {
		float: left;
	}

	.noneRight {
		float: right;
	}

	.infoList {
		background-color: #eee;
	}

	/* 复选框 */
	.checkBox {
		margin-top: 25rpx;
		margin-left: 50rpx;
	}

	.textkBox {
		margin-top: 25rpx;
		margin-left: 50rpx;
		height: 200rpx;
		width: 90%;
		border: 1rpx solid #007AFF;
		border-radius: 10rpx;
	}

	.textkBox textarea {
		padding: 15rpx;
		width: 100%;
		Height: 100%;
	}

	/* xin */
	.imgContainer {
		width: 90%;
		padding: 10rpx;
		margin: 20rpx 30rpx 0 35rpx;
		border: 1px solid #ccc;
		border-radius: 25rpx;
		overflow: auto;
		background-color: #fff;
	}

	.imgContainer:hover {
		border: 1px solid gray;
	}

	.imgButton {
		float: left;
		width: 18%;
		height: 120rpx;
		margin: 2rpx 6rpx;
	}

	.imgButton text {
		/* padding: 20rpx; */
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		font-size: 100rpx;
		text-align: center;
	}

	.imageInfo {
		position: relative;
		border: 1rpx solid #ccc;
		border-radius: 2rpx;
		width: 18%;
		height: 120rpx;
		margin: 2rpx 6rpx;
		float: left;
		border-radius: 5rpx;
	}

	.imageInfo image {
		width: 100%;
		height: 100%;
	}

	.delete-btn {
		position: absolute;
		font-size: 40rpx;
		top: 0;
		right: 0;
		color: red;
	}

	/* 提交按钮 */
	.submitBtn {
		width: 50%;
		position: fixed;
		bottom: 5%;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.cateList {
		margin-left: 35rpx;
		margin-top: 15rpx;
	}
</style>
